<template>
  <div class="preview">
    <component :is="item.component" :data="item.props.data" v-for="(item, index) in editComponentList" :key="index"/>
  </div>
</template>

<script setup lang="ts">
interface SideBarMenuItem {
  id: string,
  name: string,
  component: any,
  propsFormComponentName: string,
  props: any,
  active?: boolean,
  componentPath?: string,
  componentVersion?: string,
  isActive?: boolean,
  icon?: string,
}

import { useRouter, useRoute } from 'vue-router';
import { getEditorConfig } from '@/api/editor';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const router = useRouter();
const route = useRoute();

const editComponentList = ref<Array<SideBarMenuItem>>([]);
const isLoading = ref(false);
  /**
 * 获取网站配置信息
 */
const getWebsideEditorConfig = async () => {
  isLoading.value = true;
  const websideId = route.query.websideId;

  if (websideId == null || websideId == '') {
    proxy?.$modal.alertError('未获取到网站ID');
    isLoading.value = false;
    return;
  }

  try {
    const res = await getEditorConfig(websideId);
    editComponentList.value = res.data.components.map((e:any) => {
      return {
        id: e.componentId,
        name: e.componentName,
        // component后面应该对应的是组件的名称
        // 需要提前注册组件库
        component: e.type,
        propsFormComponentName: e.confLable,
        props: {
          data:e.componentConfiguration == null ? {} : JSON.parse(e.componentConfiguration.replaceAll('\n', ''))
        },
        componentPath: e.componentPath,
        componentVersion: e.componentVersion,
        isActive: true,
        icon: e.icon,
      } as SideBarMenuItem;
    });
    console.log(editComponentList.value);
  } finally {
    isLoading.value = false;
  }
}

onMounted(() => {
  getWebsideEditorConfig();
});
</script>

<style lang="scss" scoped>
.preview {
  margin: 0;
  padding: 0
}
</style>
